<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向表单布局-BootStrap常用表单布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="/user/plug-in/bootstrapv4.1.3/css/bootstrap.css" rel="stylesheet">
    <script src="/user/plug-in/jquery/jquery.min.js"></script>
    <script src="/user/plug-in/layuiv2.3.0/layui.js"></script>
    <script src="/user/plug-in/bootstrapv4.1.3/js/bootstrap.js"></script>
    <script src="/user/plug-in/jquery-cookie/jquery-cookie.js"></script>

</head>
<body>
    <div class="container">
	    <div class="modal-body">
			<form role="form" id="userform">
			    <input type="hidden" id="id" name="id" th:value="${user.id}">
				<div class="form-group">
					<label for="username" >用户名</label>
					<input type="text" class="form-control" id="username" th:value="${user.userName}" autocomplete="off" name="userName"  placeholder="输入 用户名" />
				</div>
				<div class="form-group">
					<label for="email">密码</label>
					<input type="password" class="form-control" id="password"  th:value="${user.passWord}" autocomplete="off" name="passWord" placeholder="输入密码" />
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<button class="btn btn-primary" id="submit">保存</button>
		</div>
	</div>
</body>
<script type="text/javascript">
    $(function(){
    	
    	$("#submit").on("click",function(){
    		layui.use('layer', function(){
    			var layer=layui.layer;
    			if(!$("#username").val()){
    				layer.msg('用户名不能为空', {
    				    time: 2000 //2s后自动关闭
    				})
    			}
    			if(!$("#username").val()){
    				layer.msg('密码不能为空', {
    				    time: 2000 //2s后自动关闭
    				})
    			}
    			var index=layer.load(1, { shade: [0.5] });
	    		$.ajax({
	                type: "POST",
	                url: "/user/saveUser",
	                data: $("#userform").serialize(),
	                beforeSend: function(request) {
		   	             request.setRequestHeader("token", getCookie('token'));//添加token
		   	        },
	                success: function (r) {
	                	//layer.msg('保存成功', {
	    				//    time: 2000 //2s后自动关闭
	    				//}) 
	    				
	    				parent.layer.close(index);
						parent.layer.msg('保存成功!', {icon: 1, time: 1800});
						parent.layer.closeAll("iframe");
	                },
	                error: function(event, XMLHttpRequest, ajaxOptions, thrownError){
	                	layer.msg('保存失败'); 
	                	layer.close(index); 
	                	console.log(event);
	                	console.log(XMLHttpRequest);
	                	console.log(ajaxOptions);
	                	console.log(thrownError);
	               	}
	            });
    		})
    	})
    })
</script>


</html>